<template>
  <div>
    <Header :loginState="'toLogin'" :headerStyle="'light'"></Header>
    <Reload></Reload>
    <!-- HERO
            ============================================= -->
    <section id="page-hero" class="hero py-6">
      <div class="hero-center">
        <!-- breadcrumb Start -->
        <div class="container">
          <div class="row hero-content text-center">
            <div class="col-lg-9 mx-auto">
              <h2>药物识别</h2>
              <nav
                aria-label="breadcrumb"
                class="d-flex flex-column align-items-center text-center"
              >
                <ol class="breadcrumb mb-0 bg-transparent p-0">
                  <li class="breadcrumb-item">
                    <a class="text-white" href="index.html">返回首页</a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    识别
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
        <!-- breadcrumb End -->
      </div>
      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <!-- PORTFOLIO
            ============================================= -->
    <section id="portfolio" class="portfolio py-6">
      <div class="container">
        <div class="row mt-5">
          <!--   Portfolio Filters   -->
          <ul
            id="portfolio-filter"
            class="list-unstyled list-inline mb-0 col-lg-12 text-center portfolio-filter"
          >
            <li class="list-inline-item">
              <a
                id="portfolio-default"
                href="#"
                data-filter="*"
                class="active my-1"
                ref="portfolio_filter_first_a"
                >All</a
              >
            </li>
            <li class="list-inline-item">
              <a href="#" data-filter=".webdesign" class="my-1">Web Design</a>
            </li>
            <li class="list-inline-item">
              <a href="#" data-filter=".mobiledesign" class="my-1"
                >Mobile Design</a
              >
            </li>
            <li class="list-inline-item">
              <a href="#" data-filter=".seo" class="my-1">Seo</a>
            </li>
            <li class="list-inline-item">
              <a href="#" data-filter=".graphic" class="my-1">Graphic</a>
            </li>
          </ul>
        </div>
        <div class="portfolio-items row mt-4">
          <!-- Item 01 -->
          <div class="col-md-4 portfolio-item seo">
            <div class="portfolio-item-content box">
              <img
                src="../assets/img/portfolio/portfolio-detail-01.jpg"
                alt="/"
              />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-detail-01.jpg"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Item 02 -->
          <div class="col-md-4 portfolio-item graphic">
            <div class="portfolio-item-content box">
              <img
                src="../assets/img/portfolio/portfolio-detail-02.jpg"
                alt="/"
              />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-detail-02.jpg"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Item 03 -->
          <div class="col-md-4 portfolio-item webdesign graphic">
            <div class="portfolio-item-content box">
              <img
                src="../assets/img/portfolio/portfolio-detail-03.jpg"
                alt="/"
              />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-detail-03.jpg"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Item 04 -->
          <div class="col-md-4 portfolio-item mobiledesign">
            <div class="portfolio-item-content box">
              <img
                src="../assets/img/portfolio/portfolio-detail-04.jpg"
                alt="/"
              />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-detail-04.jpg"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Item 05 -->
          <div class="col-md-4 portfolio-item mobiledesign seo">
            <div class="portfolio-item-content box">
              <img src="../assets/img/portfolio/portfolio-img-05.png" alt="/" />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-img-05.png"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Item 06 -->
          <div class="col-md-4 portfolio-item mobiledesign">
            <div class="portfolio-item-content box">
              <img src="../assets/img/portfolio/portfolio-img-06.png" alt="/" />
              <div class="box-content">
                <h6>
                  <a href="portfolio-detail-01.html">art & illustration</a>
                </h6>
                <h4>
                  <a href="portfolio-detail-01.html">Inspiring new space.</a>
                </h4>
              </div>
              <ul class="icon">
                <li>
                  <a
                    href="./img/portfolio/portfolio-img-06.png"
                    class="js-zoom-gallery"
                    ><i class="lni-search"></i
                  ></a>
                </li>
                <li>
                  <a href="portfolio-detail-01.html"
                    ><i class="lni-link"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- End container -->
    </section>
    <!-- END PORTFOLIO -->

    <!-- NEWSLETTER
            ============================================= -->
    <div class="newsletter-01 bg-base-color py-6">
      <div class="container">
        <div class="row py-4">
          <div class="col-lg-9 m-auto">
            <h5 class="text-white text-capitalize">More With Us</h5>
            <div class="mb-4">
              <h2>You Want to Showcase Your Website in Top Join With Us</h2>
            </div>

            <!-- Buttons -->
            <div class="hero-btns">
              <a href="javascript:void(0);" class="btn text-capitalize mb-lg-0"
                >Join With Us</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  END NEWSLETTER -->

    <!-- FOOTER
            ============================================= -->
    <footer id="footer" class="container-fluid pt-6 bg-light">
      <!-- FOOTER CONTENT -->
      <div class="row">
        <div class="footer-section-bg-graphics">
          <img src="../assets/img/footer-section-bg.png" alt="/" />
        </div>

        <div class="container">
          <div class="row footer-section">
            <!-- FOOTER Roiton-INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-logo">
                <!-- Title -->
                <a href="index.html">
                  <h3 class="base-color">Roiton</h3>
                </a>

                <!-- Text -->
                <p>
                  sed diam nonummy nibh euismod tincidunt aliquam erat volutpat.
                </p>
                <p>
                  Lorem ipsum dolor nibh euismod tincidunt sit amet adipiscing
                  elit, ut laoreet dolore magna aliquam erat volutpat.
                </p>
              </div>
            </div>
            <!-- END FOOTER Roiton-INFO -->

            <!-- FOOTER INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Contact Us</h4>
                <!-- Text -->
                <p>Lorem ipsum dolor sit amet, consectetuer sed volutpat.</p>

                <ul>
                  <li>
                    <span class="base-color lni-map-marker"></span>NewYork,
                    United State
                  </li>
                  <li>
                    <span class="base-color lni-phone"></span>+123-4567-890
                  </li>
                  <li>
                    <span class="base-color lni-envelope"></span
                    ><a href="mailto:" class="text-dark"
                      ><span
                        class="__cf_email__"
                        data-cfemail="e390828e938f86a390828e938f86cd808c8e"
                        >[email&#160;protected]</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
            <!-- END FOOTER INFO -->

            <!-- FOOTER NEWSLETTER FORM -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-newsletter">
                <!-- Title -->
                <h4>Subscribe Us</h4>

                <!-- Text -->
                <p>
                  Stay up to date with our latest news, updates and our new
                  products!
                </p>

                <form action="#" method="get">
                  <button class="newsletter-btn" type="submit">
                    <i class="lni-envelope text-white"></i>
                  </button>
                  <input
                    class="newsletter"
                    type="text"
                    placeholder="mail@example.com"
                  />
                </form>
              </div>
            </div>
            <!-- END FOOTER NEWSLETTER FORM -->

            <!-- FOOTER SOCIAL LINKS -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Social Links</h4>

                <!-- Text -->
                <p>
                  Join our mailing list to stay up to date and get notices about
                  our new releases!
                </p>

                <ul class="social-link list-inline">
                  <li>
                    <a href="#"><i class="lni-facebook-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-twitter-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-google-plus"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-instagram-filled"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- END SOCIAL LINKS -->
          </div>
        </div>
        <!-- End container -->
      </div>
      <!-- END FOOTER CONTENT -->

      <!-- FOOTER COPYRIGHT -->
      <div class="row footer-copy-right">
        <div class="container">
          <div class="row border-top">
            <div class="col-sm-8 footer-copy-right-text">
              Copyright &copy; 2021.Company name All rights reserved.
            </div>
          </div>
        </div>
      </div>
      <!-- END FOOTER COPYRIGHT -->
    </footer>
    <!-- END FOOTER -->
    <ReturnTop></ReturnTop>
  </div>
</template>
 
<script>
// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";
import roiton from "../assets/js/apps/roiton";
import { portfolioPopup, portfolioIsotop } from "../assets/js/apps/roiton";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    //瀑布流绑定事件函数
    portfolioPopup();
    portfolioIsotop();

    //修复瀑布流初始化高度崩塌
    setTimeout(() => {
      $(this.$refs.portfolio_filter_first_a)[0].click();
    }, 1500);
  },
  methods: {},
  components: {
    Header,
    ReturnTop,
    Reload,
  },
};
</script>

<style>
/* #portfolio .portfolio-items{
  min-height: 400px;
} */
</style>
